<template>
  <div class="search-container">
    <input v-model="projectName" type="text" placeholder="输入项目名字">
    <van-dropdown-menu class="search-box">
      <van-dropdown-item v-model="state" :options="states" />
    </van-dropdown-menu>
    <i @click="search">&#xe622;</i>
  </div>
</template>

<script>
import App from '@/App.vue';
export default {
  props:['item'],
  data() {
    return {
      state: '',
      projectName: '',
      states: [
        { text: '全部', value: '' },
        { text: '新建', value: '新建' },
        { text: '确认', value: '确认' },
        { text: '在途', value: '在途' },
        { text: '完成', value: '完成' },
        { text: '作废', value: '作废' }
      ],
    }
  },
  components: { App },
  methods:{
    search(){
      console.log('子组件事件');
      this.item({projectName:this.projectName,state:this.state})
    }
  }
}
</script>

<style lang="less" scoped>
@import '@/style/common.less';

.search-container {
  display: flex;
  height: 28px;
  padding: 10px 0;
  border-bottom: 1px solid @c8;
  >input {
    flex: 1;
    width: 0;
    height: 28px;
    border: none;
    outline: none;
    background: transparent;
    font-size: .75rem;
    padding: 0 12px;

    &::-webkit-input-placeholder {
      font-size: .65rem;
    }
  }
  >i {
    flex: 0 0 48px;
    width: 0;
    height: 28px;
    .lebei-ft();
    text-align: center;
    line-height: 28px;
  }
}
</style>